<template>
  <div>
    <!-- 使用Header组件 -->
    <HeaderComponent 
      :isLoggedIn="userStore.isLoggedIn"
      :userInfo="userStore.userInfo"
      :showUserPanel="showUserPanel"
      @toggle-user-panel="toggleUserPanel"
      @logout="handleLogout"
    />
    
    <div class="profile-page">
    <!-- 个人信息卡片 -->
    <div class="profile-card">
      <div class="profile-header">
        <div class="profile-avatar">
          <img :src="userAvatarUrl" :alt="userStore.userInfo.nickname + '的头像'" @error="handleImageError" />
        </div>
        <div class="profile-info">
          <h1 class="profile-name">{{ userStore.userInfo.nickname }}</h1>
        <div class="profile-id">用户{{ userStore.userInfo.nickname }}</div>
          <div class="profile-level">
            <span class="level-icon">🏆</span>
            掘友等级 JV.1
            <span class="level-progress-text">7.5 / 15 ></span>
          </div>
        </div>
        <div class="profile-actions">
          <button class="settings-btn" @click="navigateToSettings">设置</button>
        </div>
      </div>
      
      <!-- 统计信息 -->
      <div class="profile-stats">
        <div class="stat-item">
          <div class="stat-value">1</div>
          <div class="stat-label">关注</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">0</div>
          <div class="stat-label">赞过</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">1</div>
          <div class="stat-label">收藏</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">2</div>
          <div class="stat-label">关注者</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">2024-11-21</div>
          <div class="stat-label">加入</div>
        </div>
      </div>
    </div>

    <!-- 功能按钮区域 -->
    <div class="feature-buttons">
      <div class="feature-button" @click="navigateTo('course-center')">
        <div class="feature-icon">📚</div>
        <div class="feature-name">课程中心</div>
      </div>
      <div class="feature-button" @click="navigateTo('my-discounts')">
        <div class="feature-icon">🎟️</div>
        <div class="feature-name">我的优惠</div>
      </div>
      <div class="feature-button" @click="navigateTo('my-registrations')">
        <div class="feature-icon">📋</div>
        <div class="feature-name">我的报名</div>
      </div>
    </div>
    
    <!-- 左侧菜单区域 -->
    <div class="sidebar-menu">
      <div class="menu-item" @click="navigateTo('profile')">
        <div class="menu-icon">👤</div>
        <div class="menu-text">我的主页</div>
      </div>
      <div class="menu-item" @click="navigateTo('growth-benefits')">
        <div class="menu-icon">🎁</div>
        <div class="menu-text">成长福利</div>
      </div>
      <div class="menu-item" @click="navigateTo('content-notes')">
        <div class="menu-icon">📝</div>
        <div class="menu-text">内容笔记</div>
      </div>
      <div class="menu-item" @click="navigateTo('member-center')">
        <div class="menu-icon">🔑</div>
        <div class="menu-text">会员中心</div>
      </div>
      <div class="menu-item" @click="navigateTo('course-center')">
        <div class="menu-icon">📚</div>
        <div class="menu-text">课程中心</div>
      </div>
      <div class="menu-item" @click="navigateTo('my-discounts')">
        <div class="menu-icon">🎟️</div>
        <div class="menu-text">我的优惠</div>
      </div>
      <div class="menu-item" @click="navigateTo('my-registrations')">
        <div class="menu-icon">📋</div>
        <div class="menu-text">我的报名</div>
      </div>
      <div class="menu-item" @click="navigateTo('my-footprints')">
        <div class="menu-icon">👣</div>
        <div class="menu-text">我的足迹</div>
      </div>
    </div>
    
    <!-- 导航标签 -->
    <div class="profile-nav">
      <div class="nav-tabs">
        <div class="nav-tab active">动态</div>
        <div class="nav-tab">文章</div>
        <div class="nav-tab">专栏</div>
        <div class="nav-tab">沸点</div>
        <div class="nav-tab">收藏集</div>
        <div class="nav-tab">关注</div>
        <div class="nav-tab">作品</div>
        <div class="nav-tab">赞 0</div>
      </div>
      <div class="search-box">
        <input type="text" placeholder="搜索" class="search-input">
        <span class="search-icon">🔍</span>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="profile-content">
      <div class="activity-item">
        <div class="activity-avatar" :style="{ backgroundImage: `url(${userAvatarUrl})` }"></div>
        <div class="activity-info">
          <span class="activity-user">{{ userStore.userInfo.nickname }}</span>
          <span class="activity-action">关注了</span>
          <span class="activity-target">MacroZheng</span>
        </div>
      </div>
      
      <div class="empty-state">
        <div class="empty-icon">📝</div>
        <div class="empty-text">暂无更多动态</div>
        <div class="empty-subtext">快去关注一些优秀的作者，或者发布一些内容吧！</div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import HeaderComponent from '@/components/HeaderComponent.vue'
import { useUserStore } from '@/stores/user.js'

export default {
  name: 'ProfileView',
  components: {
    HeaderComponent
  },
  setup() {
    const userStore = useUserStore();
    return {
      userStore
    }
  },
  data() {
    return {
      showUserPanel: false
    }
  },
  computed: {
    userAvatarUrl() {
      const avatar = this.userStore.userInfo.userAvatar;
      console.log('计算属性 - 原始头像URL:', avatar);
      const result = avatar || '/touxiang.jpg';
      console.log('计算属性 - 最终头像URL:', result);
      return result;
    }
  },
  async mounted() {
    // 初始化用户状态，这会尝试从API获取最新的用户信息
    await this.userStore.initUserState();
    
    // 如果初始化后仍未登录，可能需要跳转到登录页面
    if (!this.userStore.isLoggedIn) {
      console.log('用户未登录，可能需要跳转到登录页面');
      // 这里可以根据需要跳转到登录页面或显示登录提示
      // this.$router.push('/login');
    } else {
      console.log('用户已登录，用户信息:', this.userStore.userInfo);
      console.log('用户头像URL:', this.userStore.userInfo.userAvatar);
      console.log('头像URL或默认值:', this.userStore.userInfo.userAvatar || '/touxiang.jpg');
    }
  },
  methods: {
    toggleUserPanel() {
      this.showUserPanel = !this.showUserPanel;
    },
    handleLogout() {
      this.userStore.logout();
      this.$router.push('/');
    },
    navigateTo(routeName) {
      this.$router.push({ name: routeName });
    },
    navigateToSettings() {
      this.$router.push({ name: 'user-settings-profile' });
    },
    handleImageError(event) {
      console.log('图片加载失败，使用默认头像');
      event.target.src = '/touxiang.jpg';
    }
  }
}
</script>

<style scoped>
.profile-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f4f5f5;
  min-height: 100vh;
}

.profile-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.profile-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 16px;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 4px 0;
  color: #1d2129;
}

.profile-id {
  color: #86909c;
  font-size: 14px;
  margin-bottom: 8px;
}

.profile-level {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #1e80ff;
}

.level-icon {
  margin-right: 4px;
}

.level-progress-text {
  margin-left: auto;
  color: #86909c;
}

.profile-actions {
  display: flex;
  gap: 8px;
}

.settings-btn {
  padding: 8px 16px;
  border: 1px solid #e4e6eb;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.settings-btn:hover {
  background-color: #f7f8fa;
}

.profile-stats {
  display: flex;
  justify-content: space-around;
  padding-top: 20px;
  border-top: 1px solid #e4e6eb;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #1d2129;
}

.stat-label {
  font-size: 12px;
  color: #86909c;
  margin-top: 4px;
}

.feature-buttons {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.feature-button {
  background: white;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.feature-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.feature-name {
  font-size: 14px;
  color: #1d2129;
}

.sidebar-menu {
  background: white;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:hover {
  background-color: #f7f8fa;
}

.menu-item.active {
  background-color: #e8f4ff;
  color: #1e80ff;
}

.menu-icon {
  font-size: 18px;
  margin-right: 12px;
  width: 20px;
  text-align: center;
}

.menu-text {
  font-size: 14px;
  color: #1d2129;
  font-weight: 500;
}

.menu-item:hover .menu-text {
  color: #1e80ff;
}

.profile-nav {
  background: white;
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.nav-tabs {
  display: flex;
  gap: 24px;
}

.nav-tab {
  padding: 8px 0;
  cursor: pointer;
  color: #86909c;
  font-size: 14px;
  border-bottom: 2px solid transparent;
}

.nav-tab.active {
  color: #1e80ff;
  border-bottom-color: #1e80ff;
}

.nav-tab:hover {
  color: #1e80ff;
}

.search-box {
  position: relative;
}

.search-input {
  padding: 8px 32px 8px 12px;
  border: 1px solid #e4e6eb;
  border-radius: 4px;
  font-size: 14px;
  width: 200px;
}

.search-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #86909c;
}

.profile-content {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e4e6eb;
}

.activity-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  margin-right: 12px;
}

.activity-info {
  font-size: 14px;
}

.activity-user {
  font-weight: bold;
  color: #1d2129;
}

.activity-action {
  color: #86909c;
  margin: 0 4px;
}

.activity-target {
  color: #1e80ff;
  cursor: pointer;
}

.activity-target:hover {
  text-decoration: underline;
}

.empty-state {
  text-align: center;
  padding: 60px 0;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 16px;
  color: #1d2129;
  margin-bottom: 8px;
}

.empty-subtext {
  font-size: 14px;
  color: #86909c;
}
</style>